<template>
    <div class="person">
        <img  class="person-img" :src="this.userList.userPic"/>
        
        <div class="info">
            <p class="name">{{this.userList.name}}</p>
            <p class="introduction">{{this.userList.hobby}}</p>
            <p class="account">{{this.userList.email}}</p>
            <el-button class="details" type="primary" round @click="register">个人详情页</el-button>
        </div>
        <div class="data">
            <div class="followers">
                <img class="followers-icon" src="@/assets/mime/followers.png"/>
                <div class="followers-info">
                    <p class="info-number">654</p>
                    <p class="info-name">关注者</p>
                </div>
            </div>
            <div class="visits">
                <img class="visits-icon" src="@/assets/mime/visits.png"/>
                <div class="visits-info">
                    <p class="info-number">124</p>
                    <p class="info-name">访问数量</p>
                </div>
            </div>
            <div class="articles">
                <img class="articles-icon" src="@/assets/mime/articles.png"/>
                <div class="articles-info">
                    <p class="info-number">15</p>
                    <p class="info-name">柠文总数</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/**
 @file 博客总页
**/


export default {
    name: 'person',
    components: {
    },
    props: ['userList'],
    data () {
        return {}
    },
    created() {
    },
    methods: {
        register() {
            this.$router.push('/inside/creation/personItem')
        }
    }
}
</script>

<style lang="less" scoped>
.person {
    position: absolute;
    right: 0;
    top: 0;
    height: 95.3vh;
    width: 17.6vw;
    background-color: transparent;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    .person-img {
        height: 15.1vh;
        width: 15.1vh;
        position: absolute;
        top: 12.1vh;
        left: 4vw;
        border-radius: 50%;
    }
    .info {
        position: absolute;
        top: 29.1vh;
        left: 0.2vw;
        height: 22vh;
        width: 17.2vw;
        .name {
            font-size: 24px;
            font-weight: 400;
            color: rgba(13, 128, 120, 1);
            text-align: center;
            margin: 1vh 0;
        }
        .introduction {
            font-size: 14px;
            font-weight: 400;
            color: rgba(80, 80, 80, 1);
            text-align: center;
            margin: 2vh 0;
        }
        .account {
            font-size: 18px;
            font-weight: 400;
            color: rgba(183, 183, 183, 1);
            text-align: center;
            margin: 1vh 0;
        }
        .details {
            width: 185px;
            height: 50px;
            border-radius: 15px;
            font-size: 20px;
            background-color: #0d8078;
            position: absolute;
            top: 16vh;
            left: 2.5vw;
        }
    }
    .data {
        position: absolute;
        top: 55vh;
        left: 1.5vw;
        height: 35vh;
        width: 13.6vw;
        .followers {
            height: 11.6vh;
            width: 13.6vw;
            display:flex;
            justify-content:space-around;
            align-items: center;
            .followers-icon {
                height: 5vh;
                width: 5.6vh;
            }
            .followers-info {
                display: flex;  
                flex-direction: column-reverse;
                float: left;
                .info-number {
                    font-size: 24px;
                    font-weight: 400;
                    color: rgba(0, 186, 173, 1);
                    margin: -4vh -1vw -1vh 1.5vw;
                }
                .info-name {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(111, 111, 111, 1);
                    margin: -3vh 3vw -2vh 1.5vw;
                }
            }
        }
        .visits {
            height: 11.6vh;
            width: 13.6vw;
            display:flex;
            justify-content:space-around;
            align-items: center;
            .visits-icon {
                height: 5.6vh;
                width: 5.6vh;
            }
            .visits-info {
                display: flex;  
                flex-direction: column-reverse;
                float: left;
                .info-number {
                    font-size: 24px;
                    font-weight: 400;
                    color: rgba(0, 186, 173, 1);
                    margin: -4vh -1vw -1vh 1.5vw;
                }
                .info-name {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(111, 111, 111, 1);
                    margin: -3vh 3vw -2vh 1.5vw;
                }
            }
        }
        .articles {
            height: 11.6vh;
            width: 14.6vw;
            display:flex;
            justify-content:space-around;
            align-items: center;
            .articles-icon {
                height: 5.6vh;
                width: 5.6vh;
            }
            .articles-info {
                display: flex;  
                flex-direction: column-reverse;
                // float: left;
                .info-number {
                    font-size: 24px;
                    font-weight: 400;
                    color: rgba(0, 186, 173, 1);
                    margin: -4vh -1vw -1vh 1.5vw;
                }
                .info-name {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(111, 111, 111, 1);
                    margin: -3vh 3vw -2vh 1.5vw;
                }
            }
        }
    }

}
</style>
